<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:thSys="">
<div th:replace="admin/module/macros :: head('编辑面试题')"></div>
<body class="app sidebar-mini rtl">
<main class="app-content">
    <div th:replace="admin/module/macros :: header"></div>
    <div th:replace="admin/module/macros :: sidebar"></div>
    <div class="app-title">
        <div>
            <h1>
                <i class="fa fa-book"></i>修改面试题
            </h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="/admin/article">面试题管理</a></li>
            <li class="breadcrumb-item">修改面试题</li>
        </ul>
    </div>
    <form id="articleFrom" class="form-horizontal">
        <input type="hidden" id="articleContent" name="articleContent">
        <input type="hidden" id="articleContentMd" name="articleContentMd">
        <input type="hidden" id="articleStatus" name="articleStatus">
        <input type="hidden" id="article_id" th:value="${questionCustom.id}" name="id">
        <div class="row">
            <div class="col-md-8">
                <div class="tile">
                    <div class="table-responsive">
                        <div class="form-group">
                            <input class="form-control" th:value="${questionCustom.articleTitle}" name="articleTitle"
                                   id="articleTitle" type="text"
                                   placeholder="输入面试题标题">
                        </div>
                        <!-- 	 <div class="form-group">
                                <input class="form-control" name="articleUrl" th:value="${questionCustom.articleUrl}" id="articleUrl" type="text"
                                    placeholder="默认拼音链接，如果为空则自动生成时间戳链接">
                            </div>  -->
                        <div class="form-group">
                            <textarea class="form-control" id="articleMd"
                                      th:text="${questionCustom.articleContentMd}"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="tile">
                    <div class="form-group row">
                        <label class="control-label col-md-3">面试题类型:</label>
                        <div class="col-md-9">
                            <select name="articleType" th:value="${questionCustom.articleType}" class="form-control">
                                <optgroup label="请选择">
                                    <option th:selected="${questionCustom.articleType==0}" value="0">原创</option>
                                    <option th:selected="${questionCustom.articleType==1}" value="1">转载</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">开启评论:</label>
                        <div class="col-md-9">
                            <select name="articleComment" th:value="${questionCustom.articleComment}"
                                    class="form-control">
                                <optgroup label="请选择">
                                    <option th:selected="${questionCustom.articleComment==0}" value="0">是</option>
                                    <option th:selected="${questionCustom.articleComment==1}" value="1">否</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">面试题分类:</label>
                        <div class="col-md-9">
                            <select name="category" class="form-control" id="categorySelect4" th:value="${questionCustom.categoryId}" style="width: 362px">
                                <optgroup label="点击选择">
                                    <option th:each="category :${categorys}" th:value="${category.categoryId}"
                                            th:text="${category.categoryName}"></option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">面试题子分类:</label>
                        <div class="col-md-9">
                            <select name="subCategory" class="form-control" id="subCategor4" style="width: 362px">
                                <optgroup label="点击选择">
                                    <option th:each="subCategory:${subCategorys}"
                                            th:value="${subCategory.id}"
                                            th:text="${subCategory.name}"></option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <input type="hidden" id="categoryId" th:value="${questionCustom.categoryId}">
                    <input type="hidden" id="subCategoryId" th:value="${questionCustom.subCategoryId}">
                    <div class="form-group row">
                        <label class="control-label col-md-3">面试题标签:</label>
                        <div class="col-md-9">
                            <select name="tags" class="form-control" id="tagSelect4"
                                    multiple="" style="width: 362px">
                                <optgroup label="点击选择，可多选">
                                    <option th:each="tag :${tags}" th:value="${tag.tagId}"
                                            th:text="${tag.tagName}"></option>
                                </optgroup>
                            </select>

                            <span class="bb" th:each="a:${tagsIds}" th:text="${a}"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">面试题略缩图：</label>
                        <div class="col-md-9">
                            <div class="input-group">
                                <input type="text" class="form-control" id="articleThumbnail"
                                       name="articleThumbnail" readonly="readonly"
                                       th:value="${questionCustom.articleThumbnail}"> <span class="input-group-btn">
									<button class="btn btn-default " type="button"
                                            th:onclick="'javascript:openChoice(\''+articleThumbnail+'\')'">选择</button>
								</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">面试题摘要:</label>
                        <div class="col-md-9">
                            <textarea class="form-control" th:text="${questionCustom.articleSummary}"
                                      th:value="${questionCustom.articleSummary}" name="articleSummary"
                                      rows="3"></textarea>
                        </div>
                    </div>
                    <div class="tile-footer">
                        <button class="btn btn-outline-primary" onclick="save(0)" type="button">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</main>
<div th:replace="admin/module/macros :: comm"></div>
<script src="/plugins/layer/layer.js"></script>
<script
        src="/plugins/simplemde/simplemde.min.js"></script>
<script
        src="/plugins/highlight/highlight.min.js"></script>
<script
        src="/plugins/select2/select2.min.js"></script>
<script src="/plugins/pinyinjs/pinyin_dict_notone.js"></script>
<script src="/plugins/pinyinjs/pinyinUtil.js"></script>
<script src="/plugins/inline-attachment/codemirror-4.inline-attachment.min.js"></script>
<script type="text/javascript">
    var simplemde = new SimpleMDE({
        element: document.getElementById("articleMd"),
        //如果设置为true，则强制下载Font Awesome（用于图标）。如果设置为false，则阻止下载。默认为undefined，将智能检查是否已包含Font Awesome，然后相应下载。
        autoDownloadFontAwesome: false,
        //如果设置为true，则自动对焦编辑器。默认为false。
        autofocus: true,
        //自动保存
        /*  autosave:{
              //如果设置为true，则自动保存文本。默认为false。
              enabled:true,
              //保存之间的延迟，以毫秒为单位。默认为10000（10s）。
              delay:5000,
              //您必须设置唯一的字符串标识符，以便SimpleMDE可以自动保存。将此与您网站上其他地方的SimpleMDE实例区分开来的东西。
              uniqueId:1
         }, */
        //调整预览期间解析Markdown的设置
        renderingConfig: {
            ///如果设置为true，将使用highlight.js突出显示
            codeSyntaxHighlighting: true
        },
        //要显示的图标名称数组。可用于显示默认隐藏的特定图标，而无需完全自定义工具栏。
        showIcons: ["code", "table"],
        //如果设置，则自定义选项卡大小。默认为2。
        tabSize: 4,
    });
    $(function () {
        var PC = IsPC();
        if (PC) {
            var style = document.createElement("style");
            style.type = "text/css";
            try {
                style.appendChild(document.createTextNode(".CodeMirror{height: 500px;z-index: 9999;}.editor-toolbar{z-index: 9999  !important;}"));
            } catch (ex) {
                style.styleSheet.cssText = ".CodeMirror{height: 500px;z-index: 9999;}.editor-toolbar{z-index: 9999  !important;}";
            }
            var head = document.getElementsByTagName("head")[0];
            head.appendChild(style);
        }

        function IsPC() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }

        //编辑器拖拽文件上传
        inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
            uploadUrl: "/admin/attachment/upload"
        });
        //生成url链接
        $("#articleTitle").blur(function () {
            $.ajax({
                url: "/admin/article/filter",
                type: "post",
                data: {"articleTitle": pinyinUtil.getPinyin($("#articleTitle").val())},
                dataType: "json",
                success: function (data) {
                    $("#articleUrl").val(data.msg);
                }
            });
        });

        var categorySelect4 = $('#categorySelect4');
        var subCategor4 = $('#subCategor4');
        categorySelect4.val($('#categoryId').val()).select2();
        $('#tagSelect4').select2();
        subCategor4.select2();
        subCategor4.val($('#subCategoryId').val()).trigger('change');
        //设置默认选择
        $.ajax({
            url: "/admin/article/ids",
            type: "post",
            async: false,
            data: {"article_id": $("#article_id").val()},
            dataType: "json",
            success: function (data) {
                console.log(data);
                $('#tagSelect4').val(data.tagsIds).trigger('change');
            }
        })
    });

    //选择略缩图
    function openChoice(id) {
        layer.open({
            type: 2,
            title: '所有附件',
            anim: 2,
            area: ['90%', '90%'],
            maxmin: true,
            shadeClose: true,
            content: "/admin/profile/openChoice/" + id
        });
    }

    //保存面试题
    function save(articleStatus) {
        var contentMd = simplemde.value();
        if (contentMd !== "") {
            $("#articleContentMd").val(contentMd);
            $("#articleContent").val(simplemde.markdown(contentMd));
            $("#articleStatus").val(articleStatus);
            var obj = $("#articleFrom").serialize();
            $.ajax({
                type: "post",
                url: "/admin/question/new/save",
                data: obj,
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data.flag === true) {
                        simplemde.clearAutosavedValue();
                        window.location.href = "/admin/question";
                    } else {
                        showMsg(data.msg, "error", "3000");
                    }
                }
            });
        } else {
            showMsg("请填写面试题内容！", "error", "3000");
        }
    }
    //监控改变
    $('#categorySelect4').change(function () {
        var data = $("#categorySelect4").val();
        console.log(data);

        //设置默认选择
        $.ajax({
            url: "/admin/question/getSubCategoryByCategoryId",
            type: "post",
            async: false,
            data: {"categoryId": data},
            dataType: "json",
            success: function (data) {
                console.log(data);
                var subCategor4 = $("#subCategor4");
                subCategor4.select2().empty();
                setTimeout(function () {
                    var option = "<option value=''>请选择子分类</option>";
                    if (data.length > 0) {
                        subCategor4.html(option);
                        for (var i = 0; i < data.length; i++) {
                            option += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                        }
                    }
                    subCategor4.html(option);
                }, 100);
            }
        })
    });
</script>
</body>
</html>